<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>权限节点管理</title>
    <!-- PLUGINS CSS STYLE -->
    <link href="/assets/plugins/toaster/toastr.min.css" rel="stylesheet" />
    <link href="/assets/plugins/nprogress/nprogress.css" rel="stylesheet" />
    <link href="/assets/plugins/flag-icons/css/flag-icon.min.css" rel="stylesheet"/>
    <link href="/assets/plugins/jvectormap/jquery-jvectormap-2.0.3.css" rel="stylesheet" />
    <link href="/assets/plugins/ladda/ladda.min.css" rel="stylesheet" />
    <link href="/assets/plugins/select2/css/select2.min.css" rel="stylesheet" />
    <link href="/assets/plugins/daterangepicker/daterangepicker.css" rel="stylesheet" />
    <!-- SLEEK CSS -->
    <link id="sleek-css" rel="stylesheet" href="/assets/css/sleek.css" />
    <!-- FAVICON -->
    <link href="/assets/img/favicon.png" rel="shortcut icon" />

    <!--
      HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
    -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="/assets/plugins/nprogress/nprogress.js"></script>
</head>


<body class="sidebar-fixed sidebar-dark header-light header-fixed" id="body">
<div class="mobile-sticky-body-overlay"></div>

<div class="wrapper">
    <!--
    ====================================
    ——— LEFT SIDEBAR WITH FOOTER
    =====================================
    -->
    <aside class="left-sidebar bg-sidebar">
        <div id="sidebar" class="sidebar sidebar-with-footer">
            <!-- Aplication Brand -->
            <div class="app-brand">
                <a href="/web/index.html">
                    <svg
                            class="brand-icon"
                            xmlns="http://www.w3.org/2000/svg"
                            preserveAspectRatio="xMidYMid"
                            width="30"
                            height="33"
                            viewBox="0 0 30 33"
                    >
                        <g fill="none" fill-rule="evenodd">
                            <path
                                    class="logo-fill-blue"
                                    fill="#7DBCFF"
                                    d="M0 4v25l8 4V0zM22 4v25l8 4V0z"
                            />
                            <path class="logo-fill-white" fill="#FFF" d="M11 4v25l8 4V0z" />
                        </g>
                    </svg>
                    <span class="brand-name"></span>
                </a>
            </div>
            <!-- begin sidebar scrollbar -->
            <div class="sidebar-scrollbar">
                <!-- sidebar menu -->
                <ul class="nav sidebar-inner" id="sidebar-menu">
                </ul>
            </div>
        </div>
    </aside>

    <div class="page-wrapper">
        <!--
        ====================================
        ——— Header
        =====================================
        -->
        <header class="main-header " id="header">
            <nav class="navbar navbar-static-top navbar-expand-lg">
                <!-- Sidebar toggle button -->
                <button id="sidebar-toggler" class="sidebar-toggle">
                    <span class="sr-only">Toggle navigation</span>
                </button>
                <!-- search form -->
                <div class="search-form d-none d-lg-inline-block"></div>
                <div class="navbar-right ">
                    <ul class="nav navbar-nav">
                        <!-- User Account -->
                        <li class="dropdown user-menu">
                            <button href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
                                <img src="/assets/img/user/user.png" class="user-image" alt="User Image" />
                                <span class="d-none d-lg-inline-block" id="h-username"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <!-- User image -->
                                <li class="dropdown-header">
                                    <img src="/assets/img/user/user.png" class="img-circle" alt="User Image" />
                                    <div class="d-inline-block" id="h-admin">
                                    </div>
                                </li>
                                <li>
                                    <a href="/admin/login-out"> <i class="mdi mdi-logout"></i>注销</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>
        <!--
        ====================================
        ——— Content
        =====================================
        -->
        <div class="content-wrapper">
            <div class="content">
                <div class="breadcrumb-wrapper">
                    <button id="crud-create" class="mb-3 btn btn-pill btn-lg btn-success">添加管理员</button>
                </div>

                <div class="card card-table-border-none" id="recent-orders">
                    <div class="card-header justify-content-between">
                        <h2>管理员管理</h2>
                    </div>
                    <div class="card-body pt-0 pb-5">
                        <table class="table card-table table-responsive table-responsive-large" style="width:100%">
                            <thead>
                            <tr>
                                <th>管理员ID</th>
                                <th>登录名</th>
                                <th>真实姓名</th>
                                <th class="d-none d-md-table-cell">是否超管</th>
                                <th class="d-none d-md-table-cell">上次登录时间</th>
                                <th class="d-none d-md-table-cell">上次登录ip</th>
                                <th>是否启用</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="crud-index">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    <script src="/assets/plugins/jquery/jquery.min.js"></script>
    <script src="/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="/assets/plugins/toaster/toastr.min.js"></script>
    <script src="/assets/plugins/slimscrollbar/jquery.slimscroll.min.js"></script>
    <script src="/assets/plugins/charts/Chart.min.js"></script>
    <script src="/assets/plugins/ladda/spin.min.js"></script>
    <script src="/assets/plugins/ladda/ladda.min.js"></script>
    <script src="/assets/plugins/jquery-mask-input/jquery.mask.min.js"></script>
    <script src="/assets/plugins/select2/js/select2.min.js"></script>
    <script src="/assets/plugins/jvectormap/jquery-jvectormap-2.0.3.min.js"></script>
    <script src="/assets/plugins/jvectormap/jquery-jvectormap-world-mill.js"></script>
    <script src="/assets/plugins/daterangepicker/moment.min.js"></script>
    <script src="/assets/plugins/daterangepicker/daterangepicker.js"></script>
    <script src="/assets/js/sleek.js"></script>
    <script src="/assets/js/chart.js"></script>
    <script src="/assets/js/date-range.js"></script>
    <script src="/assets/js/map.js"></script>
    <script src="/assets/js/custom.js"></script>
    <script src="/assets/js/store.js"></script>
    <script type="text/javascript">
        Crud.renderItem = function(item) {
            var tr = $('<tr item-id="'+item.id+'"></tr>');
            tr.append('<td>'+item.id+'</td>');
            tr.append('<td>'+item.user_name+'</td>');
            tr.append('<td>'+item.true_name+'</td>');
            tr.append('<td>'+Element.formatter.badge(item.is_super_admin)+'</td>');
            tr.append('<td>'+Element.formatter.datetime(item.update_time)+'</td>');
            tr.append('<td>'+Element.formatter.ip(item.last_login_ip)+'</td>');
            tr.append('<td>'+Element.formatter.isOn(item.is_on)+'</td>');
            tr.append('<td><span class="curd-opt badge badge-pill badge-success" style="cursor: pointer;">查看</span> <span class="curd-opt badge badge-pill badge-warning" style="cursor: pointer;">编辑</span> <span class="curd-opt badge badge-pill badge-danger" style="cursor: pointer;">删除</span></td>');
            return tr
        };

        Crud.renderInfo = function(info) {
            var modal = $("#crud-info");
            modal.find('.modal-title').html(info.true_name);
            var table = modal.find('.modal-body table');
            table.empty();
            table.append('<tr><td>管理员ID</td><td>'+info.id+'</td></tr>');
            table.append('<tr><td>登录名</td><td>'+info.user_name+'</td></tr>');
            table.append('<tr><td>真实姓名</td><td>'+info.true_name+'</td></tr>');
            table.append('<tr><td>是否为超级管理员</td><td>'+Element.formatter.badge(info.is_super_admin)+'</td></tr>');
            table.append('<tr><td>是否启用</td><td>'+Element.formatter.badge(info.is_on)+'</td></tr>');
            table.append('<tr><td>最后登录时间</td><td>'+Element.formatter.datetime(info.update_time)+'</td></tr>');
            table.append('<tr><td>最后登录ip</td><td>'+Element.formatter.ip(info.last_login_ip)+'</td></tr>');
        };

        Crud.renderWrite = function() {
            var info = '';
            var isCreate = true;
            if(arguments.length > 0) {
                info = arguments[0];
                isCreate = false;
            }
            var modal = $('#crud-write');
            modal.find('.modal-title').html(isCreate ? '添加管理员': '编辑管理员');
            $('#crud-war-msg').empty();
            if(isCreate) {
                $('#crud-id').val('');
                $('#crud-userName').val('');
                $('#crud-trueName').val('');
                $('#crud-isSuperAdmin').prop('checked', false);
                $('#crud-isOn').prop('checked', true);
                return
            }
            $('#crud-id').val(info.id);
            $('#crud-userName').val(info.user_name);
            $('#crud-trueName').val(info.true_name);
            $('#crud-isSuperAdmin').prop('checked', (parseInt(info.is_super_admin) == 1));
            $('#crud-isOn').prop('checked', (parseInt(info.is_on) == 1));
        };

        Crud.init();
    </script>
<div class="modal fade" id="confirm" tabindex="-1" role="dialog" aria-labelledby="confirm" style="display: none;">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">操作提示</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-warning btn-pill" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger btn-pill" id="confirm-ok">确定</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="crud-info" tabindex="-1" role="dialog" aria-labelledby="crud-info" style="display: none;">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <table class="table table-responsive table-responsive-large" style="width:100%">
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-warning btn-pill" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="crud-write" tabindex="-1" role="dialog" aria-labelledby="crud-write" style="display: none;">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="crud-id" value="" data-field="id" />
                <div class="col-md-12 mb-3">
                    <label for="crud-userName">登录名</label>
                    <input type="text" class="form-control" id="crud-userName" data-field="userName" placeholder="登录后台时使用" required="">
                </div>
                <div class="col-md-12 mb-3">
                    <label for="crud-trueName">姓名</label>
                    <input type="text" class="form-control" id="crud-trueName" data-field="trueName" placeholder="姓名" required="">
                </div>
                <div class="col-md-6 mb-3">
                    <label for="crud-isSuperAdmin" style="display: block;">是否是超管</label>
                    <label class="switch switch-text switch-success switch-pill form-control-label">
                        <input type="checkbox" class="switch-input form-check-input" id="crud-isSuperAdmin" data-field="isSuperAdmin" />
                        <span class="switch-label" data-on="是" data-off="否"></span>
                        <span class="switch-handle"></span>
                    </label>
                </div>
                <div class="col-md-6 mb-3">
                    <label for="crud-isOn" style="display: block;">是否启用</label>
                    <label class="switch switch-text switch-success switch-pill form-control-label">
                        <input type="checkbox" class="switch-input form-check-input" id="crud-isOn" data-field="isOn" checked/>
                        <span class="switch-label" data-on="启用" data-off="禁用"></span>
                        <span class="switch-handle"></span>
                    </label>
                </div>
                <div class="col-md-12 mb-3">
                    <p id="crud-war-msg" style="color: #f93e3e;font-size: 20px;text-align: right;"></p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-warning btn-pill" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-danger btn-pill" id="crud-write-ok">保存</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
